<template>
  <div class="">
    <el-row>
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark">
          <span style="margin-left: -88%; font-size: 30px; font-family: '宋体';font-weight:bold"
            >报修师傅</span
          >
          <el-breadcrumb
            style="margin-left: 20px; margin-top: 8px"
            separator="/"
          >
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>报修管理</el-breadcrumb-item>
            <el-breadcrumb-item>报修师傅</el-breadcrumb-item>
          </el-breadcrumb>
        </div></el-col
      >
    </el-row>
    <el-col :span="21"
      ><div
        class="grid-content bg-purple-dark"
        style="
          margin-left: -91%;
          font-size: 20px;
          font-weight: bold;
          color: gray;
        "
      >
        报修师傅
      </div></el-col
    >
    <el-col :span="3"
      ><el-button type="success" size="mini" @click="back">返回</el-button>
      <el-button type="success" size="mini" @click="addDialog = true"
        >添加</el-button
      ></el-col
    >
    <el-table :data="staffMsg" style="width: 100%">
      <el-table-column prop="staffName" label="姓名"> </el-table-column>
      <el-table-column prop="sex" label="性别"> </el-table-column>
      <el-table-column prop="post" label="职位"> </el-table-column>
      <el-table-column prop="email" label="邮箱"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column prop="phone" label="电话"> </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-popconfirm
            title="确认删除该维修人员吗?"
            @confirm="deleteStaffId(scope.row)"
          >
            <el-button slot="reference" size="mini">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="添加维修人员"
      :visible.sync="addDialog"
      width="30%"
      center
      :append-to-body="true"
    >
      <el-cascader-panel
        :options="staffMsg2"
        :props="options"
        @change="addStaffId"
        v-model="staffName"
      ></el-cascader-panel>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      formId: this.$route.params.id,
      addDialog: false,
      staffMsg: [],
      staffMsg2: [],
      dto: {
        formId: this.$route.params.id,
        staffId: null,
      },
      options: { value: "staffName", label: "staffName" },

      staffName: null,
      options: {
        value: "staffId",
        label: "staffName",
      },
    };
  },
  components: {},
  methods: {
    back() {
      this.$router.go(-1);
    },
    findStaffMsg(id) {
      let url = "/leanyuan/rep-form/findStaff/" + id;
      this.$axios
        .get(url)
        .then((resp) => {
          this.staffMsg = resp.data.data;
          console.log(this.staffMsg);
        })
        .catch((ex) => {});
    },
    findStaffMsg2(id) {
      let url = "/leanyuan/rep-form/findStaff2?id=" + id;
      this.$axios
        .get(url)
        .then((resp) => {
          this.staffMsg2 = resp.data.data;
          console.log(this.staffMsg2);
        })
        .catch((ex) => {});
    },

    deleteStaffId(row) {
      var id = [];
      console.log(row);
      for (var i = 0; i < this.staffMsg.length; i++) {
        id.push(this.staffMsg[i].staffId);
      }
      id.splice(id.indexOf(row.staffId), 1);
      this.dto.staffId = id.join(",");
      console.log(this.dto);
      this.$axios
        .post("/leanyuan/rep-form/updateStaffId", this.dto)
        .then((resp) => {
          this.findStaffMsg(this.formId);
          this.findStaffMsg2(this.formId);
        })
        .catch((ex) => {});
      this.$message({
        type: "success",
        message: "删除成功!",
      });
    },
    addStaffId() {
      console.log(this.staffName[0]);
      this.addDialog = false;
      var id = [];
      if(this.staffMsg)
      for (var i = 0; i < this.staffMsg.length; i++) {
        id.push(this.staffMsg[i].staffId);
      }
      id.push(this.staffName[0]);
      this.dto.staffId = id.join(",");
      console.log(this.dto);

      this.$axios
        .post("/leanyuan/rep-form/updateStaffId", this.dto)
        .then((resp) => {
          this.findStaffMsg(this.formId);
          this.findStaffMsg2(this.formId);
        })
        .catch((ex) => {});
      this.$message({
        type: "success",
        message: "添加成功!",
      });
    },
  },
  mounted() {
    console.log(this.$route.params.row);
    this.findStaffMsg(this.formId);
    this.findStaffMsg2(this.formId);
  },
};
</script>

<style  scoped>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
  background-color: white;
  height: 80px;
}
.el-cascader {
  width: 100%;
}
.grid-content {
  border-radius: 4px;
  min-height: px;
}
.row-bg {
  padding: 10px 0;
}
</style>
